<template>
  <div class="out_div">
    <div class="baseList">
      <el-button style="margin-bottom: 10px" size="small" icon="el-icon-plus" @click="topAddHandler">添加</el-button>
      <el-table
          border
          size="small"
          max-height="500px"
          :data="data"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :header-cell-style="{ background: '#F8F8F8' }"
      >
        <el-table-column prop="menuName" label="名称" width="180"></el-table-column>
        <el-table-column prop="orderNum" label="顺序" width="50"></el-table-column>
        <el-table-column prop="menuType" label="类型" :formatter="typeFormatter" width="100"></el-table-column>
        <el-table-column prop="icon" label="图标" width="70">
          <template slot-scope="scope">
            <i style="font-size: 20px;color: #4c4c4c" :class="'el-icon-' + scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="是否外链" width="100" >
          <template slot-scope="scope">
             <span v-if="scope.row.isFrame === 1">是</span>
             <span v-if="scope.row.isFrame === 0">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="组件路径" width="400"></el-table-column>
        <el-table-column prop="perms" label="权限" width="400"></el-table-column>
        <el-table-column fixed="right" label="操作" width="280" align="center" prop="name">
          <template slot-scope="scope">
            <el-button v-if="scope.row.menuType != 2" size="mini" icon="el-icon-plus" type="text"
                       @click="addHandler(scope.row)">
              添加
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="delHandler(scope.row)">删除</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="editHandler(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog width="500px" :visible.sync="dialogOpt.showAddDialog" title="添加菜单/按钮">
      <el-form label-width="120px" ref="menuFrom" :model="dialogOpt.addFrom" size="mini"
               :rules="dialogOpt.menuFromRule">
        <el-form-item hidden name="id" prop="id">
          <el-input v-model="dialogOpt.addFrom.id"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="22">
            <el-form-item prop="parentsId" name="parentsId" label="父级菜单:">
              <treeSelect ref="treeSelect" @getValue="parentsSelectHandler" :options="menuTreeData"></treeSelect>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item prop="menuType" name="menuType" label="菜单类型:">
              <el-select v-model="dialogOpt.addFrom.menuType" name="menuType">
                <el-option v-for="item in dialogOpt.menuTypeSelectData"
                           :key="item.value" :label="item.label" :value="Number(item.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="菜单图标:"
                          prop="icon"
                          name="icon">
              <el-input v-model="dialogOpt.addFrom.icon" placeholder="请输入组件图标" show-word-limit
                        maxlength="50"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="菜单名称" name="menuName" prop="menuName">
              <el-input v-model="dialogOpt.addFrom.menuName" placeholder="请输入菜单名称" show-word-limit
                        maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogOpt.addFrom.menuType === 1">
          <el-col :span="22">
            <el-form-item label="是否外链:"
                          prop="isFrame" name="isFrame">
              <el-radio v-model="dialogOpt.addFrom.isFrame" :label="0">否</el-radio>
              <el-radio v-model="dialogOpt.addFrom.isFrame" :label="1">是</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogOpt.addFrom.menuType === 1">
          <el-col :span="22">
            <el-form-item label="路由路径:"
                          prop="path" name="path">
              <el-input v-model="dialogOpt.addFrom.path" placeholder="请输入路由路径" show-word-limit
                        maxlength="100"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogOpt.addFrom.menuType === 2">
          <el-col :span="22">
            <el-form-item label="按钮权限:" prop="perms" name="perms">
              <el-input type="textarea" v-model="dialogOpt.addFrom.perms" placeholder="请输入组件权限,多个权限使用英文逗号隔开"
                        show-word-limit maxlength="500"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="顺序:" name="orderNum" prop="orderNum">
              <el-input-number v-model="dialogOpt.addFrom.orderNum" :min="1" :max="100" label="请输入顺序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="22">
            <el-form-item>
              <el-button type="primary" @click="sureAddPrivilegeHandler">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as menuApi from '@/api/sys/menu'
import * as tools from '@/utils/tools'
import treeSelect from '@/components/treeSelect'

export default {
  name: 'index',
  components: {
    treeSelect
  },
  data() {
    return {
      menuTreeData: [],
      menuSearchForm: {},
      data: [],
      dialogOpt: {
        menuFromRule: {
          parentId: [{required: true, message: '请选择父级菜单', trigger: 'change'}],
          menuType: [{required: true, message: '请选择菜单类型', trigger: 'change'}],
          menuName: [{required: true, message: '请填写组件名称', trigger: 'change'}],
          path: [{required: true, message: '请填写组件路径', trigger: 'change'}],
          icon: [{required: true, message: '请填写组件图标', trigger: 'change'}],
          orderNum: [{required: true, message: '请填写组件顺序', trigger: 'change'}]
        },
        menuTypeSelectData: [],
        rowData: '',
        showAddDialog: false,
        addFrom: {
          isFrame: 0,
          id: '',
          menuType: '',
          menuName: '',
          path: '',
          icon: '',
          perms: '',
          orderNum: 0,
          parentId: '',
          parentName: ''
        }
      }
    }
  },
  methods: {
    clearEdit() {
      this.$refs.menuFrom.resetFields()
      this.dialogOpt.addFrom.menuType = ''
      this.$refs.treeSelect.clearHandle()
    },
    parentsSelectHandler(value) {
      this.dialogOpt.addFrom.parentId = value
      console.log(value)
    },
    typeFormatter(row) {
      return this.formatter.privilegeType(row.menuType)
    },
    topAddHandler() {
      this.addHandler()
    },
    addHandler(row) {
      this.dialogOpt.showAddDialog = true
      this.$nextTick(() => {
        this.clearEdit()
        if (row) {
          console.log(row)
          this.dialogOpt.addFrom.parentName = row.menuName
          this.dialogOpt.addFrom.parentId = row.id
          this.$refs.treeSelect.initHandle(this.dialogOpt.addFrom.parentId + '')
        }
      })
    },
    editHandler(row) {
      this.dialogOpt.showAddDialog = true
      this.$nextTick(() => {
        this.clearEdit()
        if (row) {
          this.dialogOpt.addFrom = JSON.parse(JSON.stringify(row))
          this.dialogOpt.addFrom.isFrame = this.dialogOpt.addFrom.isFrame
          this.$refs.treeSelect.initHandle(row.parentId + '')
        }
      })
    },
    sureAddPrivilegeHandler() {
      this.$refs.menuFrom.validate(valid => {
        if (valid) {
          let params = this.dialogOpt.addFrom
          menuApi.saveMenu(params).then(res => {
            tools.notify({
              type: 'success',
              message: '保存成功'
            })
            this.dialogOpt.showAddDialog = false
            this.refreshMenuListDataHandler()
          })
        }
      })
    },
    delHandler(row) {
      this.$confirm('确定要删除此菜单和子菜单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(res => {
        menuApi.del(row.id).then(res => {
          tools.notify({type: 'success', message: '删除成功'})
          this.refreshMenuListDataHandler()
        })
      })
    },
    getMenuTypeDataHandler() {
      menuApi.getMenuTypeData().then(res => {
        this.dialogOpt.menuTypeSelectData = res.data
      })
    },
    refreshMenuListDataHandler() {
      menuApi.getMenuListData().then(res => {
        this.data = res.data
      })
    },
    getMenuTreeNoBtn() {
      menuApi.getMenuTreeNoBtn().then(res => {
        this.menuTreeData = res.data
      })
    }
  },
  mounted() {
    this.refreshMenuListDataHandler()
    this.getMenuTypeDataHandler()
    this.getMenuTreeNoBtn()
  }
}
</script>

<style scoped></style>
